<template>
    <!--左侧房源筛选-->
    <div class="lefMain">
        <!--左侧1-->
        <span class="leftTop">
            <span style="font-size: 18px;white-space: nowrap;font-weight: 600;color: #7a8df1;">{{ $t('text.House.l292') }}</span>
            <span class="df" @click="this.$router.push('/addEmployees')">
                <img class="addImg" src="../../assets/images/add.svg">
                <div style="font-size: 13px;white-space: nowrap;">{{ $t('text.House.l291') }}</div>
            </span>
        </span>

        <div class="leftTopInput">
            <img class="img1" src="../../assets/images/search2.png" />
            <input :placeholder="$t('text.House.l293')" class="leftTop2Input" v-model="nameOrNo">
        </div>

        <!--左侧3-->
        <div v-if="isLoad">
            <div class="leftTop2">
                <div class="df">
                    <img class="img2" src="../../assets/images/icon.png" />
                    <div class="items">
                        <RadioSelect :leftText="$t('text.Employee.l25')" :selectList="orgTreeList" searchKey="orgIds_LIKE_RIGHT" isShowTitle
                            @returnData="setData" @clearData="clearData" isRange2>
                        </RadioSelect>
                    </div>
                </div>
                <div class="df">
                    <img class="img2" src="../../assets/images/icon.png" />
                    <div class="items">
                        <RadioSelect :leftText="$t('text.Employee.l29')" :selectList="jobSelect" searchKey="jobId_EQ" @returnData="setData"
                            @clearData="clearData" isSingle>
                        </RadioSelect>
                    </div>
                </div>
                <div class="df">
                    <img class="img2" src="../../assets/images/icon.png" />
                    <div class="items">
                        <RadioSelect :leftText="$t('text.Employee.l35')" :selectList="getSelectData('userSex')" searchKey="sex_EQ"
                            @returnData="setData" @clearData="clearData" isSingle>
                        </RadioSelect>
                    </div>
                </div>
                <div class="df">
                    <img class="img2" src="../../assets/images/icon.png" />
                    <div class="items">
                        <RadioSelect :leftText="$t('text.Employee.l75')" :selectList="getSelectData('userStatus')" searchKey="status_EQ"
                            @returnData="setData" @clearData="clearData" isSingle>
                        </RadioSelect>
                    </div>
                </div>
                <div class="df">
                    <img class="img2" src="../../assets/images/icon.png" />
                    <div class="items">
                        <RadioSelect :leftText="$t('text.Employee.l115')" :selectList="getSelectData('accountStatus')"
                            searchKey="accountStatus" @returnData="setData" @clearData="clearData" isSingle>
                        </RadioSelect>
                    </div>
                </div>
                <div class="df">
                    <img class="img2" src="../../assets/images/icon.png" />
                    <div class="time">
                        {{$t('text.Employee.l74')}}
                        <el-date-picker v-model="time" type="daterange" unlink-panels range-separator="-"
                            start-placeholder="Start date" end-placeholder="End date" :size="'small'"
                            style="width: 100px;margin-left: 10px;" value-format="YYYY-MM-DD" />
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!--右侧房源列表-->
    <div class="rightMain">
        <!--右侧顶部导航-->
        <div class="rightTop">
            <div></div>
            <div></div>
            <div class="out"><img class="outImg" src="../../assets/images/out.svg"><span>{{ $t('text.Employee.l7') }}</span>
            </div>
        </div>
        <!--右侧房源数据列表-->
        <div class="rightList">
            <div class="listContain">
                <div class="eDataList" v-for="item in userList" v-bind:key="item" @click="this.$router.push({ path: '/employeeDetails', query: { id: item.id} })">
                    <CommonImage class="headImg" :src="item.avatar"/>
                    <div class="dataLine">
                        <div class="dataDom">
                            <div class="dataTitle">{{ item.realName }}</div>
                            <div class="dataValue">
                                <span class="sp1" style="display: inline-block;">SID:{{ item.no == null ? '' :
                                    item.no }}</span>
                                <span class="sp2" v-if="item.sex == '1'">{{ $t('text.DialogLayout.l275') }}</span>
                                <span class="sp4" v-else-if="item.sex == '0'">{{ $t('text.DialogLayout.l276') }}</span>
                                <span class="sp5" v-else>{{ $t('text.DialogLayout.l277')}}</span>
                                <span class="sp3">{{ item.birthTime == null ? $t('text.DialogLayout.l277') : getAge(item.birthTime) + $t('text.Employee.l116') }}</span>
                            </div>
                        </div>
                        <div class="dataDom">
                            <div class="dataTitle">{{ item.jobName }}</div>
                            <div class="dataValue">{{ item.orgName }}</div>
                        </div>
                        <div class="dataDom">
                            <div class="dataTitle color4" v-if="item.status == '试用员工'">{{ item.status }}</div>
                            <div class="dataTitle" v-else>{{ item.status }}</div>
                            <div class="dataValue">{{ item.entryTime == null ? '-' : item.entryTime.split(" ")[0] + $t('text.Employee.l117') }}
                            </div>
                        </div>
                        <div class="dataDom">
                            <div class="dataTitle">{{item.jobTime == "" ? '-' : item.jobTime }}</div>
                            <div class="dataValue">{{item.formalTime==null?'-':$t('text.Employee.l118')+item.formalTime.split(" ")[0]}}</div>
                        </div>
                        <div class="dataDom">
                            <div class="dataTitle color1" v-if="item.accountStatus == '正常'">{{ item.accountStatus }}</div>
                            <div class="dataTitle color2" v-if="item.accountStatus == '离职'">{{ item.accountStatus }}</div>
                            <div class="dataTitle color3" v-if="item.accountStatus == '冻结'">{{ item.accountStatus }}</div>
                            <div class="dataValue">{{$t('text.Employee.l119')}}{{ item.loginTime == null ? '-' : item.loginTime.split(" ")[0] }} </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--底部分页-->
            <div class="setPage">
                <el-pagination v-model:current-page="searchData.pageNo" v-model:page-size="searchData.pageSize"
                    :page-sizes="[10, 15, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>

    </div>
</template>
    
<script>
import { useFindPage, getEmploySelectDrop, getJobDropdownBoxData, orgTreeNoUser } from '../../http/api';
import CommonImage from '../../components/input/CommonImage.vue';
import RadioSelect from '@/components/select/RadioSelect.vue';
export default {
    name: 'EmployeeManage',
    components: {
    CommonImage,
    RadioSelect
},
    data() {
        return {
            searchData: {
                pageNo: 1,
                pageSize: 15
            },
            isLoad: false,
            dictionaryTree: {},
            isReset: false,
            userList: [],
            total: 0,
            orgTreeList: [],
            jobSelect: [],
            time: '',
            nameOrNo:''
        }
    },
    mounted() {
        //初始化查询
        this.search()
        //初始化字典数据请求
        getEmploySelectDrop().then(res => {
            if (res !== undefined) {
                this.dictionaryTree = res

                getJobDropdownBoxData().then(res => {
                    if (res !== undefined) {
                        this.jobSelect = res.map(item => {
                            return Object.assign({}, item, {
                                dictName: item.name,
                                dictValue: item.id
                            });
                        });
                    }
                })
                orgTreeNoUser().then(res => {
                    if (res !== undefined) {
                        this.orgTreeList = res
                        this.isLoad = true
                    }
                }).catch()
            }
        }).catch()

    },
    methods: {

        //获取字典数据
        getSelectData(key) {
            const data = this.dictionaryTree[key]
            if (data != undefined) {
                return this.dictionaryTree[key]
            } else {
                return [{
                    dictName: "全部",
                    dictValue: "-1",
                },]
            }
        },

        getAge(birthDate) {
            birthDate = new Date(birthDate)
            let now = new Date();
            let age = now.getFullYear() - birthDate.getFullYear();
            if (now.getMonth() < birthDate.getMonth() ||
                (now.getMonth() === birthDate.getMonth() && now.getDate() < birthDate.getDate())) {
                age--;
            }
            return age;
        },

        //搜索数据
        search() {
            useFindPage(this.searchData).then(res => {
                if (res !== undefined) {
                    this.userList = res.dataList
                    this.total = res.total
                    console.log(res)
                }
            }).catch()
        },

        //拼接单个子组件返回来的条件值
        setData(obj) {
            this.searchData = { ...this.searchData, ...obj }
            console.log(JSON.stringify(this.searchData))
        },

        //子组件选择了不限，进行删除指定字段
        clearData(obj) {
            const objKeys = Object.keys(obj);
            this.searchData = Object.keys(this.searchData).reduce((acc, key) => {
                if (!objKeys.includes(key)) {
                    acc[key] = this.searchData[key];
                }
                return acc;
            }, {});
            console.log(JSON.stringify(this.searchData))
        },

        //重置
        reset() {
            this.searchData = {
                pageNo: 1,
                pageSize: 10
            }
            this.isReset = !this.isReset
        },
        handleSizeChange(val) {
            this.searchData.pageSize = val
            this.search()
        },
        handleCurrentChange(val) {
            this.searchData.pageNo = val
            this.search()
        },
    },
    watch: {
        searchData: {
            handler() {
                this.search()
            }
        },
        time() {
            if (this.time == null) {
                this.clearData({ entryTime_BEGIN: '', entryTime_END: '' })
            } else {
                let obj = { entryTime_BEGIN: this.time[0], entryTime_END: this.time[1] }
                this.searchData = { ...this.searchData, ...obj }
            }
        },
        nameOrNo(){
            let obj={nameOrNo:this.nameOrNo}
            this.setData(obj)
        }
    },
    computed: {

    }

}
</script>
    
<style scoped>
.leftTopInput{
    display: flex;
    width: 100%;
    position: relative;
    padding-top: 10px;
}
.df {
    display: flex;
    align-items: center;
    margin-top: 2px;
    margin-bottom: 2px;
}

.lefMain {
    min-width: 310px;
    padding: 15px;
    overflow: auto;
    background: white;
    margin-bottom: 30px;
    margin-right: 5px;
    box-shadow: 1px 10px 30px 4px #e9e9e9;
}

.leftTop {
    color: #6698ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.leftTop2 {
    border: 1px solid #cecece;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
    position: relative;
}

.addImg {
    width: 15px;
    height: 15px;
    padding-right: 3px;
}

.img2 {
    width: 22px;
    height: 22px;
}

.items {
    margin-left: 15px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
    color: gray;
    border-bottom: 1px solid rgb(224, 224, 224);
    width: 100%;
}

.lb {
    color: #6698ff;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    position: absolute;
    bottom: 40px;
    width: 300px;
}


.rightMain {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8f8f8;
}


.rightList {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    background: white;
    margin: 10px 30px 30px 25px;
    position: relative;
    box-shadow: 1px 5px 10px 4px #e9e9e9;
}
.listContain {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    background: white;
    position: relative;
}
.rightTop {
    display: flex;
    padding-top: 20px;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 30px;
}

.setPage {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #eee;
    padding: 10px
}

.out {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.outImg {
    width: 20px;
    height: 20px;
    padding-right: 5px;
}

.img2 {
    width: 22px;
    height: 22px;
}

.time {
    margin-left: 15px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
    color: gray;
    border-bottom: 1px solid rgb(224, 224, 224);
    width: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    justify-content: space-between;
}

.leftTop {
    color: #6698ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.leftTop2 {
    border: 1px solid #cecece;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
    position: relative;
}

.img1 {
    position: absolute;
    left: 7px;
    width: 15px;
    height: 15px;
    top: 17px;
    z-index: 1;
}

.leftTop2Input {
    outline: none;
    width: inherit;
    height: 25px;
    border: 1px solid rgb(220, 223, 230);
    padding-left: 23px;
    padding-right: 20px;
    background-color: rgb(242, 242, 242);
    border-radius: 5px;
    font-size: 12px;
    position: relative;
}

.leftTop2Input:focus {
    border: 1px solid #6698ff;
}

.eDataList {
    display: flex;
    align-items: center;
    padding: 5px 30px;
}
.eDataList:hover {
    background: #eee;
}

.headImg {
    width: 50px;
    height: 50px;
    border: 1px solid #eee;
    border-radius: 100%;
}

.dataLine {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    width: 100%;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-left: 15px;
    text-align: left;
    gap: 20px;
    border-bottom: 1px solid #eee;
}

.dataTitle {
    font-size: 13px;
    color: #6698ff;
    padding-bottom: 5px;
}

.dataValue {
    font-size: 13px;
    color: #5c5c5c;
}

.dataDom {
    flex: 1;
}

.sp1 {
    color: #6698ff;
    border: 1px solid #6698ff;
    border-radius: 3px;
    padding: 1px 2px;
    font-size: 12px;
    margin-right: 6px;
}

.sp2 {
    color: white;
    background: #2a86e5;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 2px;
    height: 17px;
    width: 25px;
    text-align: center;
    display: inline-block;
}

.sp3 {
    color: white;
    background: #52bb96;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 2px;
    margin-left: 6px;
    height: 17px;
    width: 25px;
    text-align: center;
    display: inline-block;
}

.sp4 {
    color: white;
    background: #f15886;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 2px;
    height: 17px;
    width: 25px;
    text-align: center;
    display: inline-block;
}

.sp5 {
    color: white;
    background: #979797;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 2px;
    height: 17px;
    width: 25px;
    text-align: center;
    display: inline-block;
}

.color1 {
    color: #52bb96;
}

.color2 {
    color: #f06b76;
}

.color3 {
    color: #f0c16b;
}

.color4 {
    color: #cf94cc;
}
</style>